<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="font-awesome.min.css"/>
		<script src="iconfont.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.icon {
				/*width: 10px;
				height: 10px;*/
				vertical-align: -0.15em;
				fill: currentColor;
				overflow: hidden;
			}
			.box{
				width: 15px;
				height: 15px;
				font-size: 12px;
				color: red;
				border: 1px solid red;
			}
			.box2{
				width: 30px;
				height: 30px;
				border: 1px solid red;
			}
		</style>
	</head>

	<body>
		<div class="box">
			
		<svg class="icon" aria-hidden="true">
			<use xlink:href="#icon-add"></use>
		</svg>
		</div>
		<div class="box2">
			<i class="fa fa-plus-square-o" aria-hidden="true"></i>
		</div>
	</body>

</html>